<template>
  <div class="swiper-div1">
    <div class="background"></div>
    <div class="swiper-div2">
      <ul ref="ul">
        <li v-for="(item,index) in swiperList" :key="index">
          <img :src="item" />
        </li>
      </ul>
      <!-- 以后小圆点用ul和li -->
      <div class="pos">
        <div
          v-for="(item,index) in swiperList.slice(0,4)"
          :key="index"
          class="dot"
          :class="{active:index==num}"
          @click="changeColor(index)"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import img1 from "../imgs/swiper/1.jpg";
import img2 from "../imgs/swiper/2.jpg";
import img3 from "../imgs/swiper/3.jpg";
import img4 from "../imgs/swiper/4.jpg";
export default {
  name: "Swiper",
  data() {
    return {
      num: 0,
      swiperList: [img1, img2, img3, img4, img1]
    };
  },
  methods: {
    move() {
      var ul = this.$refs.ul;
      this.timer=setInterval(() => {
        this.num++;
        ul.style.transition = "0.5s";
        ul.style.transform = `translateX(${-this.num * 100}%)`;
        if (this.num == this.swiperList.length - 1) {
          this.num = 0;
          setTimeout(() => {
            ul.style.transition = "0s";
            ul.style.transform = `translateX(${-this.num * 100}%)`;
          }, 500);
        }
      }, 3000);
    },
    changeColor(e) {
      this.num = e;
      var ul = this.$refs.ul;
      ul.style.transition = "0.5s";
      ul.style.transform = `translateX(${-this.num * 100}%)`;
    }
  },
  mounted() {
    this.move();
  }
};
</script>
<style scoped>
.swiper-div1 {
  display: flex;
  justify-content: center;
  height: 100%;
  border-radius: 2.6666vw;
}
.background {
  width: 100%;
  height: 60%;
  background-color: #c82519;
  border-radius: 0 0 10% 10%;
}
.swiper-div2 {
  position: absolute;
  overflow: hidden;
  width: 90%;
  height: 100%;
  border-radius: 2.6666vw;
}
.swiper-div2 ul {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 2.6666vw;
}
.swiper-div2 ul li {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  border-radius: 2.6666vw;
}
.swiper-div2 ul img {
  width: 100%;
  height: 100%;
  border-radius: 2.6666vw;
}
.pos {
  display: flex;
  position: absolute;
  bottom: 1.6vw;
  left: 50%;
  transform: translateX(-50%);
  height: 1.3333vw;
}
.dot {
  width: 1.3333vw;
  height: 1.3333vw;
  margin-left: 1.0666vw;
  background-color: #ccc;
  border-radius: 50%;
}
.active {
  background-color: red;
}
</style>